<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="title" width="1000px" style="height:40vh">
      <el-tabs v-model="activeTab">


        <!-- 导入 tab -->
        <el-tab-pane label="导入" name="import">
          <el-form :model="importForm">
            <el-form-item label="导入类型">
              <el-radio-group v-model="importForm.type">
                <el-radio
                  v-for="item in importTypes"
                  :key="item.type"
                  :label="item.type"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-upload
                :action="uploadUrl"
                :headers="uploadHeaders"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                accept=".xlsx,.xls"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">只能上传 xlsx/xls 文件</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/auth'
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 弹窗标题
  title: {
    type: String,
    default: '导入导出'
  },
  // 是否显示弹窗
  modelValue: {
    type: Boolean,
    default: false
  },
  // 导入类型配置
  importTypes: {
    type: Array,
    default: () => []
    // 示例: [{ type: 'course', label: '课程', importUrl: '/api/course/import' }]
  },
  // 导出类型配置
  exportTypes: {
    type: Array,
    default: () => []
    // 示例: [{ type: 'course', label: '课程', exportUrl: '/api/course/export' }]
  },
  // 基础URL
  baseUrl: {
    type: String,
    default: '/dev-api'
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

// 弹窗显示控制
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const activeTab = ref('export')

// 导入表单数据
const importForm = ref({
  type: props.importTypes[0]?.type || ''
})

// 上传相关配置
const uploadHeaders = {
  Authorization: 'Bearer ' + getToken()
}

// 获取当前选择类型的上传URL
const uploadUrl = computed(() => {
  const currentType = props.importTypes.find(t => t.type === importForm.value.type)
  return currentType ? `${props.baseUrl}${currentType.importUrl}` : ''
})

// 上传前校验
const beforeUpload = (file) => {
  const isExcel = /\.(xlsx|xls)$/.test(file.name.toLowerCase())
  if (!isExcel) {
    ElMessage.error('只能上传 Excel 文件!')
    return false
  }
  return true
}

// 上传成功处理
const handleUploadSuccess = (response) => {
  ElMessage.success('导入成功')
  emit('success', response)
}

// 上传失败处理
const handleUploadError = () => {
  ElMessage.error('导入失败')
}
</script>
